<template>
    <div
        class="sum-fullpage overflow-hidden h-screen w-full relative"
        @wheel="handleWheel"
        @touchstart="handleTouchStart"
        @touchmove="handleTouchMove"
        @touchend="handleTouchEnd"
    >
        <div
            class="sum-fullpage-wrapper transition-transform duration-700 ease-in-out h-full"
            :style="{ transform: `translateY(-${currentIndex * 100}%)` }"
        >
            <slot></slot>
        </div>

        <!-- 可选的导航点 -->
        <div v-if="options?.dots" class="absolute right-6 top-1/2 transform -translate-y-1/2">
            <div class="flex flex-col gap-3 items-center">
                <button
                    v-for="(_, index) in sectionCount"
                    :key="index"
                    @click="goToSection(index)"
                    class="w-3.5 h-3.5 rounded-full transition-all duration-300 cursor-pointer block bg-white"
                    :class="currentIndex === index ? 'border border-4 border-[#8fc320]' : 'scale-44'"
                />
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const props = defineProps({
    options: {
        type: Object,
        default: () => ({
            dots: true,
            scrollingSpeed: 700,
            minWheelDelta: 50
        })
    }
})

const currentIndex = ref(0)
const sectionCount = ref(0)
const isScrolling = ref(false)
let touchStartY = 0
let lastWheelTime = Date.now()

// 获取子节点数量
onMounted(() => {
    const sections = document.querySelectorAll('.section')
    sectionCount.value = sections.length

    // 添加键盘事件监听
    window.addEventListener('keydown', handleKeydown)
})

onUnmounted(() => {
    window.removeEventListener('keydown', handleKeydown)
})

// 防抖动的滚轮处理
const handleWheel = (e) => {
    e.preventDefault()

    const now = Date.now()
    if (isScrolling.value || now - lastWheelTime < props.options.scrollingSpeed) return

    const delta = e.deltaY
    if (Math.abs(delta) < props.options.minWheelDelta) return

    lastWheelTime = now
    if (delta > 0) {
        nextSection()
    } else {
        prevSection()
    }
}

// 触摸事件处理
const handleTouchStart = (e) => {
    touchStartY = e.touches[0].clientY
}

const handleTouchMove = (e) => {
    e.preventDefault()
    if (isScrolling.value) return

    const touchEndY = e.touches[0].clientY
    const delta = touchStartY - touchEndY

    if (Math.abs(delta) > 50) {
        if (delta > 0) {
            nextSection()
        } else {
            prevSection()
        }
        touchStartY = touchEndY
    }
}

const handleTouchEnd = () => {
    touchStartY = 0
}

// 键盘事件处理
const handleKeydown = (e) => {
    if (isScrolling.value) return

    switch (e.key) {
        case 'ArrowDown':
        case 'PageDown':
            nextSection()
            break
        case 'ArrowUp':
        case 'PageUp':
            prevSection()
            break
    }
}

// 切换部分
const nextSection = () => {
    if (currentIndex.value < sectionCount.value - 1) {
        isScrolling.value = true
        currentIndex.value++
        setTimeout(() => {
            isScrolling.value = false
        }, props.options.scrollingSpeed)
    }
}

const prevSection = () => {
    if (currentIndex.value > 0) {
        isScrolling.value = true
        currentIndex.value--
        setTimeout(() => {
            isScrolling.value = false
        }, props.options.scrollingSpeed)
    }
}

const goToSection = (index) => {
    if (isScrolling.value) return
    isScrolling.value = true
    currentIndex.value = index
    setTimeout(() => {
        isScrolling.value = false
    }, props.options.scrollingSpeed)
}
</script>

<style scoped>
.sum-fullpage {
    touch-action: none;
}
</style>
